import React, { useEffect, useState } from 'react'

import {coupon} from '../../../request'
import './DiscountModify.modules.css'

import {
    Form,
    Input,
    Button,
    Upload,
} from 'antd';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};

const normFile = (e) => {
    // console.log('Upload event:', e);
    if (Array.isArray(e)) {
        return e;
    }
    return e && e.fileList;
};

export default (props) => {

    const [componentSize, setComponentSize] = useState('default')
    const [msg, setMsg] = useState(null)

    useEffect(()=>{
        getMsg();

    },[])


    const getMsg = async() =>{
        const {data:res} = await coupon.couponData(2)    //之后根据路由的参数决定
        if(res.code === 200){

            setMsg(res.data)
        }else{
            console.log('请求数据失败');
        }
    }

    const onFormLayoutChange = ({ size }) => {
        setComponentSize(size);
        // console.log(size);
    };
    const onFinish = async (values) =>{

        const {disJuan_use, disJuan_money, disJuan_time, disJuan_title, disJuan_img=msg.disJuan_img } = values;

        const {data:res} = await coupon.couponModify(msg.disJuan_id, disJuan_use, disJuan_money, disJuan_time, disJuan_title,disJuan_img)
        if(res.code === 200){

            console.log('数据保存成功');
        }else{
            console.log('数据保存失败');
        }

    }


    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };


    const checkRules = (e)=>{

    }



    return(
        !msg ? '<div>加载中</div>' :
        <div className={'discountFrom'}>
            <h3 className={'title'}>修改优惠券模板</h3>

            <Form
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 14,
                }}
                layout="horizontal"
                initialValues={{
                    size: componentSize,
                }}
                onValuesChange={onFormLayoutChange}
                size={componentSize}
                style={{width:1200}}
                onFinish={onFinish}

                initialValues={{
                    disJuan_title: msg.disJuan_title,
                    disJuan_use : msg.disJuan_use,
                    disJuan_money : msg.disJuan_money,
                    disJuan_time : msg.disJuan_time

                }}

            >
                <Form.Item label="优惠券名称" name='disJuan_title'  rules={
                    [
                        {
                            required:true,
                            message:'填写活动名称',
                        }
                    ]
                }>
                    <Input />
                </Form.Item>
                <Form.Item label="优惠券满足条件" name='disJuan_use' rules={
                    [
                        {
                            required:true,
                            message:'填写数字,表示满多少可用',
                            pattern:/\d/
                        }
                    ]
                }>
                    <Input />
                </Form.Item>
                <Form.Item label="优惠券减少金额" name='disJuan_money' rules={
                    [
                        {
                            required:true,
                            message:'填写数字，表示可优惠多少',
                            pattern:/\d/
                        }
                    ]
                }>
                    <Input />
                </Form.Item>

                <Form.Item label="优惠券有效期" name='disJuan_time' rules={
                    [
                        {
                            required:true,
                            message:'以天数为单位，规定是整数，不可是小数',
                            pattern:/\d/
                        }
                    ]
                }>
                    <Input />
                </Form.Item>

                <Form.Item label="更改图片" required>
                    <Form.Item name="disJuan_img" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                        <Upload.Dragger action={'http://localhost:3001/coupon/uploadFile'} name="disJuan_img" enctype="multipart/form-data">
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">Support for a single or bulk upload.</p>
                        </Upload.Dragger>
                    </Form.Item>
                </Form.Item>





                <Form.Item wrapperCol={{ span: 12, offset: 14 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>

            </Form>

        </div>
    );
};

